import 'package:flutter/material.dart';
import 'package:flutter_mobx/flutter_mobx.dart';
import 'package:imperius_insights/treaty/styles.dart';

import '../../view_model.dart';
import 'menu_item_tile.dart';
import 'theme.dart';

class SideBarMenu extends StatefulWidget {
  final ViewModel viewModel;

  SideBarMenu(this.viewModel);

  @override
  _SideBarMenuState createState() => _SideBarMenuState();
}

class _SideBarMenuState extends State<SideBarMenu>
    with SingleTickerProviderStateMixin {
  double maxWidth = 250;
  double minWidth = 70;
  bool collapsed = false;

  AnimationController _animationController;
  Animation<double> _animation;

  @override
  void initState() {
    super.initState();
    _animationController =
        AnimationController(vsync: this, duration: Duration(milliseconds: 250));

    _animation = Tween<double>(begin: maxWidth, end: minWidth)
        .animate(_animationController);
  }

  @override
  Widget build(BuildContext context) {
    return AnimatedBuilder(
      animation: _animation,
      builder: (BuildContext context, Widget child) {
        return Container(
          decoration: BoxDecoration(
            boxShadow: [
              BoxShadow(blurRadius: 10, color: Colors.black26, spreadRadius: 2)
            ],
            color: drawerBgColor,
          ),
          width: _animation.value,
          child: Column(
            mainAxisAlignment: MainAxisAlignment.center,
            crossAxisAlignment: CrossAxisAlignment.center,
            children: <Widget>[
              Container(
                height: 200,
                decoration: BoxDecoration(
                    color: Colors.grey.shade300,
                    image: DecorationImage(
                      image: NetworkImage(
                          'https://s.qunarzz.com/flight_additional_bundle/images/imperius/sidebar_profile_bg.jpg'),
                      fit: BoxFit.cover,
                    )),
                child: Container(
                  padding: EdgeInsets.all(10),
                  height: 100,
                  child: Column(
                    mainAxisAlignment: MainAxisAlignment.start,
                    crossAxisAlignment: CrossAxisAlignment.start,
                    children: <Widget>[
                      Row(
                        crossAxisAlignment: CrossAxisAlignment.center,
                        mainAxisAlignment: MainAxisAlignment.start,
                        children: <Widget>[
                          InkWell(
                            onTap: widget.viewModel.onClickDisplayName,
                            child: CircleAvatar(
                              backgroundImage: NetworkImage(
                                  'https://s.qunarzz.com/flight_additional_bundle/images/imperius/avatar_default_classic.jpg'),
                              backgroundColor: Colors.white,
                              radius: _animation.value >= 250 ? 30 : 20,
                            ),
                          ),
                          SizedBox(
                            width: _animation.value >= 250 ? 20 : 0,
                          ),
                          (_animation.value >= 250)
                              ? Observer(
                            builder: (_) {
                                final displayName = widget.viewModel.displayName;
                                final departmentName = widget.viewModel.departmentName;
                                return Column(
                                  crossAxisAlignment: CrossAxisAlignment.start,
                                  children: <Widget>[
                                    InkWell(
                                      onTap: widget.viewModel.onClickDisplayName,
                                      child: Text(displayName, style: sidebarNameText),
                                    ),
                                    InkWell(
                                      onTap: widget.viewModel.onClickDepartmentName,
                                      child: Text(departmentName, style: styles.contentTipContrast),
                                    ),
                                  ],
                                );
                              },
                            )
                              : Container(),
                        ],
                      ),
                      SizedBox(
                        height: _animation.value >= 250 ? 20 : 0,
                      ),
                      Spacer(),
                      (_animation.value >= 250)
                          ? Text(
                              'Imperius Insights',
                              style: TextStyle(
                                fontSize: 16,
                                color: Colors.white,
                                fontWeight: FontWeight.bold,
                              ),
                            )
                          : Container(),
                      (_animation.value >= 250)
                          ? Text(
                              'Powered by Flutter, Designed by Sopaco',
                              style: TextStyle(
                                fontSize: 11,
                                color: Colors.white70,
                                fontWeight: FontWeight.w400,
                              ),
                            )
                          : Container(),
                    ],
                  ),
                ),
              ),
              SizedBox(
                height: 20,
              ),
              Expanded(child: Observer(builder: (_) {
                final viewModel = widget.viewModel;
                return ListView.separated(
                  separatorBuilder: (context, counter) {
                    return Divider(
                      height: 2,
                    );
                  },
                  itemCount: viewModel.menuItems.length,
                  itemBuilder: (BuildContext context, int index) {
                    final menuItem = viewModel.menuItems[index];
                    return Observer(
                      builder: (_) {
                        return MenuItemTile(
                          title: menuItem.title,
                          icon: menuItem.icon,
                          notifierText: menuItem.notifierText,
                          animationController: _animationController,
                          isSelected: viewModel.currentMenu == menuItem,
                          onTap: () {
                            viewModel.currentMenu = menuItem;
                          },
                        );
                      }
                    );
                  },
                );
              })),
              InkWell(
                onTap: () {
                  setState(() {
                    collapsed = !collapsed;
                    collapsed
                        ? _animationController.reverse()
                        : _animationController.forward();
                  });
                },
                child: AnimatedIcon(
                  icon: AnimatedIcons.close_menu,
                  progress: _animationController,
                  color: Colors.white,
                  size: 40,
                ),
              ),
              SizedBox(
                height: 20,
              )
            ],
          ),
        );
      },
    );
  }
}
